<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>post请求</title>
</head>
<body>
<a href="javascript:getServerText()">提交请求</a>
<div id="showText"></div>
<script>
  /**
   * 创建XMLHttpRequest对象
   */
  function createXhr() {
    var xhr = null;
    if (window.XMLHttpRequest) {
      xhr = new XMLHttpRequest();
    } else {
      xhr = new ActiveXObject('Microsoft.XMLHttp');
    }
    return xhr;
  }

  /**
   * 异步请求的方法
   */
  function getServerText() {
    //1. 获取Xhr
    var xhr = createXhr();
    //2. 创建请求
    xhr.open('post', 'server.php', true);
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    //3. 设置回调函数
    xhr.onreadystatechange = function () {
      // 服务器已经正确处理请求，并且返回数据到了客户端
      if (xhr.readyState == 4 && xhr.status == 200) {
        var resText = xhr.responseText;
        console.log(resText);
        document.getElementById('showText').innerHTML = resText;
      }
    };
    //1. 发送请求
    xhr.send('name=Hello Word');
  }
</script>
</body>
</html>